<template>
  <div class="app">
    <div class="container">
      <header class="header">
        <h1>📱💻 双向文件传输工具</h1>
        <p>手机与电脑之间的快速文件传输</p>
        
        <!-- 模式切换 -->
        <div class="mode-switcher">
          <button 
            @click="currentMode = 'upload'" 
            :class="['mode-btn', { active: currentMode === 'upload' }]">
            📱➡️💻 手机上传到电脑
          </button>
          <button 
            @click="currentMode = 'download'" 
            :class="['mode-btn', { active: currentMode === 'download' }]">
            💻➡️📱 电脑发送到手机
          </button>
          <button 
            @click="currentMode = 'receive'" 
            :class="['mode-btn', { active: currentMode === 'receive' }]">
            📥 手机接收文件
          </button>
        </div>
      </header>

      <!-- 手机上传到电脑模式 -->
      <div v-if="currentMode === 'upload'" class="upload-section">
        <div class="section-title">
          <h2>📱➡️💻 上传文件到电脑</h2>
          <p>选择手机中的照片或视频上传到电脑</p>
        </div>
        
        <div class="upload-area" 
             :class="{ 'dragover': isDragOver }"
             @drop="handleDrop"
             @dragover.prevent="isDragOver = true"
             @dragleave="isDragOver = false"
             @click="triggerFileInput">
          <input 
            ref="fileInput"
            type="file" 
            multiple 
            accept="image/*,video/*"
            @change="handleFileSelect"
            style="display: none;">
          
          <div class="upload-icon">📁</div>
          <h3>点击或拖拽上传文件</h3>
          <p>支持照片和视频，支持多文件同时上传</p>
        </div>

        <div class="quick-buttons">
          <button @click="selectPhotos" class="btn btn-photo">
            📷 选择照片
          </button>
          <button @click="selectVideos" class="btn btn-video">
            🎥 选择视频
          </button>
          <button @click="selectAll" class="btn btn-all">
            📁 选择所有
          </button>
        </div>

        <!-- 移动端多文件选择提示 -->
        <div class="mobile-tips">
          <div class="tip-card">
            <h4>📱 移动端多文件选择技巧</h4>
            <div class="tips-list">
              <div class="tip-item">
                <span class="tip-number">1</span>
                <span class="tip-text">在文件选择器中<strong>长按</strong>文件，然后点击其他文件进行多选</span>
              </div>
              <div class="tip-item">
                <span class="tip-number">2</span>
                <span class="tip-text">如果只能选择一个文件，可以<strong>多次点击</strong>选择按钮逐个添加</span>
              </div>
              <div class="tip-item">
                <span class="tip-number">3</span>
                <span class="tip-text">推荐使用 <strong>Chrome 浏览器</strong> 获得最佳体验</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分批选择按钮 -->
        <div class="batch-select-buttons">
          <button @click="addMoreFiles" class="btn btn-add-more">
            ➕ 继续添加文件
          </button>
          <button @click="singleFileMode" class="btn btn-single">
            📄 单文件模式
          </button>
          <button @click="showBrowserInfo" class="btn btn-info">
            ℹ️ 浏览器兼容性
          </button>
        </div>

        <div v-if="selectedFiles.length > 0" class="selected-files">
          <h3>已选择 {{ selectedFiles.length }} 个文件</h3>
          <div class="file-list">
            <div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
              <div class="file-info">
                <span class="file-name">{{ file.name }}</span>
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
              </div>
              <div class="file-progress">
                <div class="progress-bar">
                  <div class="progress-fill" 
                       :style="{ width: uploadProgress[index] + '%' }"></div>
                </div>
                <span class="progress-text">{{ uploadProgress[index] || 0 }}%</span>
              </div>
              <button @click="removeFile(index)" class="remove-btn">×</button>
            </div>
          </div>
          
          <div class="upload-controls">
            <button @click="uploadFiles" 
                    :disabled="isUploading" 
                    class="btn btn-upload">
              {{ isUploading ? '上传中...' : '开始上传' }}
            </button>
            <button @click="clearFiles" class="btn btn-clear">清空</button>
          </div>
        </div>
      </div>

      <!-- 电脑发送到手机模式 -->
      <div v-if="currentMode === 'download'" class="send-section">
        <div class="section-title">
          <h2>💻➡️📱 发送文件到手机</h2>
          <p>选择电脑中的文件发送到手机</p>
        </div>
        
        <div class="upload-area" 
             :class="{ 'dragover': isSendDragOver }"
             @drop="handleSendDrop"
             @dragover.prevent="isSendDragOver = true"
             @dragleave="isSendDragOver = false"
             @click="triggerSendFileInput">
          <input 
            ref="sendFileInput"
            type="file" 
            multiple 
            @change="handleSendFileSelect"
            style="display: none;">
          
          <div class="upload-icon">📤</div>
          <h3>点击或拖拽选择文件</h3>
          <p>支持所有文件类型，多文件同时发送</p>
        </div>

        <div v-if="selectedSendFiles.length > 0" class="selected-files">
          <h3>准备发送 {{ selectedSendFiles.length }} 个文件</h3>
          <div class="file-list">
            <div v-for="(file, index) in selectedSendFiles" :key="index" class="file-item">
              <div class="file-info">
                <span class="file-name">{{ file.name }}</span>
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
              </div>
              <div class="file-progress">
                <div class="progress-bar">
                  <div class="progress-fill" 
                       :style="{ width: sendProgress[index] + '%' }"></div>
                </div>
                <span class="progress-text">{{ sendProgress[index] || 0 }}%</span>
              </div>
              <button @click="removeSendFile(index)" class="remove-btn">×</button>
            </div>
          </div>
          
          <div class="upload-controls">
            <button @click="sendFiles" 
                    :disabled="isSending" 
                    class="btn btn-send">
              {{ isSending ? '发送中...' : '发送到手机' }}
            </button>
            <button @click="clearSendFiles" class="btn btn-clear">清空</button>
          </div>
        </div>
      </div>

      <!-- 手机接收文件模式 -->
      <div v-if="currentMode === 'receive'" class="receive-section">
        <div class="section-title">
          <h2>📥 接收电脑发送的文件</h2>
          <p>下载电脑发送过来的文件</p>
        </div>
        
        <div class="refresh-controls">
          <button @click="refreshDownloadList" 
                  :disabled="isRefreshing" 
                  class="btn btn-refresh">
            {{ isRefreshing ? '刷新中...' : '🔄 刷新列表' }}
          </button>
        </div>

        <div v-if="downloadableFiles.length > 0" class="download-list">
          <h3>可下载的文件 ({{ downloadableFiles.length }})</h3>
          <div class="file-list">
            <div v-for="file in downloadableFiles" :key="file.id" class="download-item">
              <div class="file-info">
                <span class="file-name">{{ file.originalName }}</span>
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
                <span class="file-time">{{ formatTime(new Date(file.uploadTime)) }}</span>
              </div>
              <div class="download-actions">
                <button @click="downloadFile(file)" 
                        :disabled="downloadingFiles.includes(file.id)"
                        class="btn btn-download">
                  {{ downloadingFiles.includes(file.id) ? '下载中...' : '📥 下载' }}
                </button>
                <button @click="deleteFile(file)" 
                        class="btn btn-delete">
                  🗑️
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-state">
          <div class="empty-icon">📭</div>
          <h3>暂无可下载的文件</h3>
          <p>电脑还没有发送文件过来</p>
        </div>
      </div>

      <!-- 操作结果 -->
      <div v-if="uploadResults.length > 0" class="results">
        <h3>操作结果</h3>
        <div class="result-list">
          <div v-for="result in uploadResults" :key="result.id" 
               :class="['result-item', result.success ? 'success' : 'error']">
            <span>{{ result.message }}</span>
            <span class="result-time">{{ formatTime(result.time) }}</span>
          </div>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="stats">
        <div class="stat-item">
          <span class="stat-label">总操作:</span>
          <span class="stat-value">{{ totalOperations }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">成功:</span>
          <span class="stat-value success">{{ successCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">失败:</span>
          <span class="stat-value error">{{ errorCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import axios from 'axios'

interface UploadResult {
  id: number
  message: string
  success: boolean
  time: Date
}

interface DownloadableFile {
  id: string
  filename: string
  originalName: string
  size: number
  uploadTime: string
  downloadUrl: string
}

// 当前模式
const currentMode = ref<'upload' | 'download' | 'receive'>('upload')

// 上传相关
const fileInput = ref<HTMLInputElement>()
const selectedFiles = ref<File[]>([])
const uploadProgress = reactive<{ [key: number]: number }>({})
const isDragOver = ref(false)
const isUploading = ref(false)

// 发送相关
const sendFileInput = ref<HTMLInputElement>()
const selectedSendFiles = ref<File[]>([])
const sendProgress = reactive<{ [key: number]: number }>({})
const isSendDragOver = ref(false)
const isSending = ref(false)

// 接收相关
const downloadableFiles = ref<DownloadableFile[]>([])
const downloadingFiles = ref<string[]>([])
const isRefreshing = ref(false)

// 结果
const uploadResults = ref<UploadResult[]>([])

const totalOperations = computed(() => uploadResults.value.length)
const successCount = computed(() => uploadResults.value.filter(r => r.success).length)
const errorCount = computed(() => uploadResults.value.filter(r => !r.success).length)

// 上传功能
const triggerFileInput = () => {
  fileInput.value?.click()
}

const selectPhotos = () => {
  if (fileInput.value) {
    fileInput.value.accept = 'image/*'
    fileInput.value.multiple = true
    fileInput.value.click()
    
    // 添加用户提示
    setTimeout(() => {
      if (selectedFiles.value.length === 0) {
        addResult('提示：在文件选择器中，尝试长按文件进行多选，或点击多个文件', true)
      }
    }, 1000)
  }
}

const selectVideos = () => {
  if (fileInput.value) {
    fileInput.value.accept = 'video/*'
    fileInput.value.multiple = true
    fileInput.value.click()
    
    setTimeout(() => {
      if (selectedFiles.value.length === 0) {
        addResult('提示：在文件选择器中，尝试长按文件进行多选，或点击多个文件', true)
      }
    }, 1000)
  }
}

const selectAll = () => {
  if (fileInput.value) {
    fileInput.value.accept = 'image/*,video/*'
    fileInput.value.multiple = true
    fileInput.value.click()
    
    setTimeout(() => {
      if (selectedFiles.value.length === 0) {
        addResult('提示：在文件选择器中，尝试长按文件进行多选，或点击多个文件', true)
      }
    }, 1000)
  }
}

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files) {
    const newFiles = Array.from(target.files)
    console.log(`文件选择器返回了 ${newFiles.length} 个文件`)
    
    // 显示选择的文件信息（调试用）
    newFiles.forEach((file, index) => {
      console.log(`文件 ${index + 1}: ${file.name}, 大小: ${file.size}, 类型: ${file.type}`)
    })
    
    if (newFiles.length === 0) {
      addResult('未选择任何文件，请重试', false)
      return
    }
    
    // 检查是否真的选择了多个文件
    if (newFiles.length === 1 && selectedFiles.value.length === 0) {
      // 可能是浏览器限制，给用户提示
      addResult(`已选择 1 个文件。如需选择多个文件，请尝试：1) 长按文件进行多选 2) 使用其他浏览器如Chrome`, true)
    }
    
    addFiles(newFiles)
    
    // 清空input以允许重复选择相同文件
    target.value = ''
  } else {
    addResult('文件选择失败，请重试', false)
  }
}

const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  isDragOver.value = false
  
  if (event.dataTransfer?.files) {
    addFiles(Array.from(event.dataTransfer.files))
  }
}

const addFiles = (files: File[]) => {
  const validFiles = files.filter(file => 
    file.type.startsWith('image/') || file.type.startsWith('video/')
  )
  
  const invalidFiles = files.filter(file => 
    !file.type.startsWith('image/') && !file.type.startsWith('video/')
  )
  
  if (invalidFiles.length > 0) {
    addResult(`已过滤 ${invalidFiles.length} 个不支持的文件类型`, false)
  }
  
  if (validFiles.length > 0) {
    // 避免重复添加相同文件
    const existingFileNames = selectedFiles.value.map(f => f.name)
    const newFiles = validFiles.filter(file => !existingFileNames.includes(file.name))
    
    if (newFiles.length < validFiles.length) {
      addResult(`已跳过 ${validFiles.length - newFiles.length} 个重复文件`, false)
    }
    
    selectedFiles.value.push(...newFiles)
    
    if (newFiles.length > 0) {
      addResult(`成功添加 ${newFiles.length} 个文件`, true)
    }
  }
}

const removeFile = (index: number) => {
  selectedFiles.value.splice(index, 1)
  delete uploadProgress[index]
}

const clearFiles = () => {
  selectedFiles.value = []
  Object.keys(uploadProgress).forEach(key => {
    delete uploadProgress[parseInt(key)]
  })
}

// 发送功能
const triggerSendFileInput = () => {
  sendFileInput.value?.click()
}

const handleSendFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files) {
    selectedSendFiles.value.push(...Array.from(target.files))
  }
}

const handleSendDrop = (event: DragEvent) => {
  event.preventDefault()
  isSendDragOver.value = false
  
  if (event.dataTransfer?.files) {
    selectedSendFiles.value.push(...Array.from(event.dataTransfer.files))
  }
}

const removeSendFile = (index: number) => {
  selectedSendFiles.value.splice(index, 1)
  delete sendProgress[index]
}

const clearSendFiles = () => {
  selectedSendFiles.value = []
  Object.keys(sendProgress).forEach(key => {
    delete sendProgress[parseInt(key)]
  })
}

// 接收功能
const refreshDownloadList = async () => {
  isRefreshing.value = true
  try {
    const response = await axios.get('/api/download-list')
    if (response.data.success) {
      downloadableFiles.value = response.data.files
    }
  } catch (error) {
    console.error('刷新下载列表失败:', error)
    addResult('刷新下载列表失败', false)
  } finally {
    isRefreshing.value = false
  }
}

const downloadFile = async (file: DownloadableFile) => {
  downloadingFiles.value.push(file.id)
  try {
    const response = await axios.get(file.downloadUrl, {
      responseType: 'blob'
    })
    
    // 创建下载链接
    const blob = new Blob([response.data])
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = file.originalName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    addResult(`已下载: ${file.originalName}`, true)
  } catch (error) {
    console.error('下载失败:', error)
    addResult(`下载失败: ${file.originalName}`, false)
  } finally {
    downloadingFiles.value = downloadingFiles.value.filter(id => id !== file.id)
  }
}

const deleteFile = async (file: DownloadableFile) => {
  try {
    await axios.delete(`/api/download/${encodeURIComponent(file.filename)}`)
    downloadableFiles.value = downloadableFiles.value.filter(f => f.id !== file.id)
    addResult(`已删除: ${file.originalName}`, true)
  } catch (error) {
    console.error('删除失败:', error)
    addResult(`删除失败: ${file.originalName}`, false)
  }
}

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatTime = (date: Date): string => {
  return date.toLocaleTimeString()
}

const addResult = (message: string, success: boolean) => {
  uploadResults.value.unshift({
    id: Date.now(),
    message,
    success,
    time: new Date()
  })
}

// 移动端兼容性方法
const addMoreFiles = () => {
  if (fileInput.value) {
    fileInput.value.accept = 'image/*,video/*'
    fileInput.value.multiple = true
    fileInput.value.click()
  }
}

const singleFileMode = () => {
  if (fileInput.value) {
    fileInput.value.accept = 'image/*,video/*'
    fileInput.value.multiple = false
    fileInput.value.click()
  }
}

const showBrowserInfo = () => {
  const userAgent = navigator.userAgent
  let browserInfo = '当前浏览器：'
  
  if (userAgent.includes('Chrome') && !userAgent.includes('Edge')) {
    browserInfo += 'Chrome ✅ (推荐)'
  } else if (userAgent.includes('Firefox')) {
    browserInfo += 'Firefox ✅ (推荐)'
  } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
    browserInfo += 'Safari ⚠️ (部分支持)'
  } else if (userAgent.includes('Edge')) {
    browserInfo += 'Edge ✅ (推荐)'
  } else if (userAgent.includes('OPPO')) {
    browserInfo += 'OPPO浏览器 ⚠️ (建议使用Chrome)'
  } else if (userAgent.includes('Vivo')) {
    browserInfo += 'Vivo浏览器 ⚠️ (建议使用Chrome)'
  } else if (userAgent.includes('Huawei')) {
    browserInfo += '华为浏览器 ⚠️ (建议使用Chrome)'
  } else if (userAgent.includes('Xiaomi')) {
    browserInfo += '小米浏览器 ⚠️ (建议使用Chrome)'
  } else {
    browserInfo += '未知浏览器 ⚠️ (建议使用Chrome)'
  }
  
  browserInfo += '\n\n多文件选择支持情况：'
  browserInfo += '\n✅ Chrome、Firefox、Edge：完全支持'
  browserInfo += '\n⚠️ Safari：部分支持'
  browserInfo += '\n❌ 部分手机自带浏览器：不支持或有限制'
  browserInfo += '\n\n建议：如遇到问题，请下载Chrome浏览器使用'
  
  addResult(browserInfo, true)
}

// 检测移动端设备
const isMobile = () => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}

// 上传文件
const uploadFiles = async () => {
  if (selectedFiles.value.length === 0) return
  
  isUploading.value = true
  
  try {
    const formData = new FormData()
    selectedFiles.value.forEach((file, index) => {
      formData.append('files', file)
      uploadProgress[index] = 0
    })
    
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          selectedFiles.value.forEach((_, index) => {
            uploadProgress[index] = progress
          })
        }
      }
    })
    
    if (response.data.success) {
      selectedFiles.value.forEach((file) => {
        addResult(`${file.name} 上传成功`, true)
      })
      clearFiles()
    } else {
      addResult('上传失败: ' + response.data.message, false)
    }
    
  } catch (error) {
    console.error('上传失败:', error)
    addResult('上传失败: ' + (error as any).message, false)
  } finally {
    isUploading.value = false
  }
}

// 发送文件
const sendFiles = async () => {
  if (selectedSendFiles.value.length === 0) return
  
  isSending.value = true
  
  try {
    const formData = new FormData()
    selectedSendFiles.value.forEach((file, index) => {
      formData.append('files', file)
      sendProgress[index] = 0
    })
    
    const response = await axios.post('/api/send-to-mobile', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          selectedSendFiles.value.forEach((_, index) => {
            sendProgress[index] = progress
          })
        }
      }
    })
    
    if (response.data.success) {
      selectedSendFiles.value.forEach((file) => {
        addResult(`${file.name} 已发送到手机`, true)
      })
      clearSendFiles()
    } else {
      addResult('发送失败: ' + response.data.message, false)
    }
    
  } catch (error) {
    console.error('发送失败:', error)
    addResult('发送失败: ' + (error as any).message, false)
  } finally {
    isSending.value = false
  }
}

// 组件挂载时刷新下载列表
onMounted(() => {
  refreshDownloadList()
  
  // 检测移动端并显示指导
  if (isMobile()) {
    setTimeout(() => {
      const userAgent = navigator.userAgent
      if (userAgent.includes('OPPO') || userAgent.includes('Vivo') || 
          userAgent.includes('Huawei') || userAgent.includes('Xiaomi')) {
        addResult('检测到手机自带浏览器，建议使用Chrome浏览器获得最佳多文件选择体验', true)
      } else {
        addResult('移动端提示：如无法多选文件，可多次点击选择按钮逐个添加文件', true)
      }
    }, 2000)
  }
})
</script>

<style scoped>
.app {
  min-height: 100vh;
  padding: 20px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.header p {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.mode-switcher {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.mode-btn {
  padding: 12px 20px;
  border: 2px solid #ddd;
  border-radius: 25px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  color: #666;
}

.mode-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.mode-btn.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title h2 {
  color: #333;
  margin-bottom: 10px;
}

.section-title p {
  color: #666;
}

.upload-section,
.send-section,
.receive-section {
  margin-bottom: 30px;
}

.upload-area {
  border: 3px dashed #ddd;
  border-radius: 15px;
  padding: 60px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
  margin-bottom: 20px;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: #667eea;
  background: #f0f4ff;
  transform: translateY(-2px);
}

.upload-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.upload-area h3 {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.upload-area p {
  color: #666;
}

.quick-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.mobile-tips {
  margin-bottom: 25px;
}

.tip-card {
  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
  border-radius: 15px;
  padding: 20px;
  border-left: 4px solid #2196f3;
}

.tip-card h4 {
  color: #1976d2;
  margin-bottom: 15px;
  font-size: 1.1rem;
  text-align: center;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tip-number {
  background: #2196f3;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-text {
  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
}

.tip-text strong {
  color: #1976d2;
  font-weight: 600;
}

.batch-select-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-add-more {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
}

.btn-single {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
}

.btn-info {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
}

.refresh-controls {
  text-align: center;
  margin-bottom: 30px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 120px;
}

.btn-photo {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
}

.btn-video {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
}

.btn-all {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  color: white;
}

.btn-upload {
  background: linear-gradient(135deg, #00b894, #00a085);
  color: white;
}

.btn-send {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  color: white;
}

.btn-clear {
  background: linear-gradient(135deg, #636e72, #2d3436);
  color: white;
}

.btn-refresh {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
}

.btn-download {
  background: linear-gradient(135deg, #00b894, #00a085);
  color: white;
  min-width: 80px;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.btn-delete {
  background: linear-gradient(135deg, #ff7675, #d63031);
  color: white;
  min-width: 60px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.selected-files,
.download-list {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
}

.selected-files h3,
.download-list h3 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.file-list {
  max-height: 400px;
  overflow-y: auto;
}

.file-item,
.download-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  display: block;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-top: 5px;
}

.file-time {
  display: block;
  color: #999;
  font-size: 0.8rem;
  margin-top: 2px;
}

.file-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 15px;
  min-width: 120px;
}

.progress-bar {
  width: 80px;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b894, #00a085);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8rem;
  color: #666;
  min-width: 35px;
}

.download-actions {
  display: flex;
  gap: 10px;
}

.remove-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #ff7675;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover {
  background: #d63031;
}

.upload-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.empty-state h3 {
  margin-bottom: 10px;
}

.results {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
}

.results h3 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.result-list {
  max-height: 300px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.result-item.success {
  background: #d4edda;
  color: #155724;
}

.result-item.error {
  background: #f8d7da;
  color: #721c24;
}

.result-time {
  font-size: 0.8rem;
  opacity: 0.7;
}

.stats {
  display: flex;
  justify-content: space-around;
  background: #f8f9fa;
  border-radius: 15px;
  padding: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.stat-value.success {
  color: #00b894;
}

.stat-value.error {
  color: #ff7675;
}

@media (max-width: 768px) {
  .container {
    margin: 0;
    padding: 20px;
    border-radius: 0;
  }
  
  .header h1 {
    font-size: 2rem;
  }
  
  .mode-switcher {
    flex-direction: column;
    align-items: center;
  }
  
  .mode-btn {
    width: 100%;
    max-width: 280px;
  }
  
  .upload-area {
    padding: 40px 15px;
  }
  
  .quick-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 200px;
  }
  
  .file-item,
  .download-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .file-progress {
    margin: 0;
    min-width: auto;
  }
  
  .download-actions {
    justify-content: center;
  }
  
  .upload-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .stats {
    flex-direction: column;
    gap: 15px;
  }
}
</style> 